<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="author" content="huaicheng151201@163.com"/>
    <meta name="keywords" content="HTML,PHP,SQL"/>
    <meta name="description" content=""/>
    <meta name="revised" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="msapplication-tap-highlight" content="no"/>
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/details_header.css">
    <link rel="stylesheet" href="css/doard.css">
    <style>
        .dmui-banner-img{
            height: 200px;
        }
    </style>
</head>
<body style="background-color:#F5F5F5;">
    <header style="height: auto;"></header>
    <section style="margin-top:42px;">
        <div id="banner" style="width:100%;border-radius:0;"></div>
        <section id="content-box" >
            <p style="text-align: center">加载中...</p>
        </section>
    </section>
    <script src="js/jquery-1.12.0.min.js"></script>
    <script src="js/touch.0.2.14.min.js"></script>
    <script src="js/dmui-banner.js"></script>
    <script src="js/lib/template.min.js"></script>
    <script src="js/reqeust.js"></script>
    <script>
        var heardertxt = "美景详情页",imgArr="";
        $(function () {
            $("header").load("details_header.html");
            var id = $C.query().id;
            if(!id){
                $("#content-box").find("p").html("id缺失,访问路径错误!");
                return;
            }
            sendByUrl("/GetFoodHotalSceneryDetail",{id:id},function (res) {
                var datas = [];
                if (res.hasValue == "true") {
                    imgArr = res.data.images.length > 0 && res.data.images[0];
                    for (var i = 0; i < res.data.images.length; i++) {
                        item = res.data.images[i];
                        datas.push({
                            title: "",
                            img: configCommon.pic + item,
                            href: ""
                        })
                    }
                    $("#content-box").html(template("content-temp",{data:res.data}));
                    // banner
                    $.banner({
                        id: "banner",
                        btnGroup: false, // 隐藏左右按钮组
                        data: datas
                    });
                    $('body').on(clickevent,".delicious_btn",function () {
                        location.href = "daohang.html?adress="+res.data.address;
                    });
                }else{
                    $("#content-box").find("p").html("id缺失,访问路径错误!");
                }
                $(".share_open").removeClass("hide");
            });
            $("body").on("click",".share_item",function () {
                var id = $(this).attr("data-id"),
                        title = $(".detail_title").text(),
                        subtitle = $(".detail_content").text().substr(0,20),
                        url = imgArr || "http://www.ganzixinwen.com/uploads/file/2017/0602/20170602060904451.jpg";

                shareInfo(title,subtitle,location.href,url,id);
            });
        });
    </script>
    <script type="text/html" id="content-temp" >
        <div class="delicious_title">
            <p class="detail_title">{{data.name}}</p>
            <p class="address_msg">
                <span><b style="width:21%;">地址：</b><b style="width:78%;">{{data.address}}</b></span>
                <span class="hide"><b></b>距离:14KM</span>
            </p>
            <div class="scenery_msg">
                <p id="title">
                    <span><b></b>景点介绍</span>
                    <span></span>
                </p>
                <p class="text detail_content" style="padding:0;">
                    {{#data.detail}}
                </p>
                <p class="delicious_btn" style="margin-top:1rem;width:100%;">
                    <b></b>导航
                </p>
            </div>
        </div>
        <div class="delicious_msg" style="padding:0;overflow:hidden;margin-bottom:0;">
            {{if data.defaultvideo}}
                <p class="shop_msg" style="padding:1rem 1.5rem;">
                    <span><b></b>景点全景</span>
                </p>

                {{if data.defaultvideo.indexOf(".html") > -1}}
                <iframe id="J-player" src="{{data.defaultvideo}}" width='100%' height='210' frameborder="0" scrolling="no"></iframe>
                {{else}}
                    <div id="video" style="padding:0;overflow: hidden;">
                        <video style="height: 100%;width: 100%;" controls src="http://182.131.21.48/resource/video/video/zgphb/1000/0600kangdingqinggeajiazuhe.mp4"
                               webkit-playsinline="true"></video>
                    </div>
                {{/if}}
            {{/if}}
            {{if data.video && data.video.length > 0}}
            <p class="time_msg" style="padding:1rem 1.5rem;">
                <span><b></b>实时景点</span>
            </p>
            <ul>
                {{each data.video as item i}}
                <li>
                    <a href="video_details.html?url={{item.path}}">
                    <p>
                        <img src="{{item.Img}}" alt="">
                        <span><img src="images/real_time.png" alt=""></span>
                        <div class="icon" ><img src="images/vision_play.png" alt=""></div>
                    </p>
                    <p>{{item.name}}</p>
                    </a>
                </li>
                {{/each}}
            </ul>
            {{/if}}
        </div>
    </script>
</body>
</html>